<template>
  <div>

    <div style="float: left">
      <el-input v-model="select.advctx" placeholder="广告内容" style="width: 200px"></el-input>
      <el-input v-model="select.advauthor" placeholder="创作作者" style="width: 200px"></el-input>
      <el-button style="margin-left: 10px" type="primary" @click="flushPage"><i class="el-icon-search">&nbsp;&nbsp;查询</i></el-button>
      <el-button @click="insertFlag = true,insertData={}"><i class="el-icon-eleme">&nbsp;&nbsp;新增广告</i></el-button>
    </div>
    <el-table
        ref="multipleTable"
        :data="advsList"
        tooltip-effect="dark"
        style="width: 100%"
        border
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }">
      <el-table-column
          prop="advid"
          label="通知id"
          width="150"
          fixed
      >
      </el-table-column>
      <el-table-column
          prop="advctx"
          label="通知正文"
          width="340"
      >
      </el-table-column>
      <el-table-column
          prop="advauthor"
          label="通知作者"
          width="200"
      >
      </el-table-column>
      <el-table-column
          prop="advtop"
          label="置顶"
          width="100"
      >
        <template slot-scope="scope">
          <el-switch
              v-model="scope.row.advtop"
              disabled>
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
          prop="advtime"
          label="创建时间"
          width="180"
      >
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
      >
        <template slot-scope="scope">
          <el-button type="danger" @click="deleteById(scope.row)"> 删除通知</el-button>
          <el-button type="primary" @click="popShow(scope.row)">查看详情</el-button>
          <el-button type="success" @click="popModify(scope.row)">修改通知</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[3,5,10,20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <el-dialog
        title="详情"
        :visible.sync="showFlag"
        width="50%"
    >
      <el-descriptions class="margin-top" title="无边框列表" :column="1">
        <template slot="extra">
        </template>
        <el-descriptions-item label="发布人">{{ showData.advauthor }}</el-descriptions-item>
        <el-descriptions-item label="发布时间">{{ showData.advtime }}</el-descriptions-item>
        <el-descriptions-item label="消息正文"></el-descriptions-item>
      </el-descriptions>
      <div v-html="showData.advctx"></div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="showFlag = false">取 消</el-button>
  </span>
    </el-dialog>

    <el-dialog
        title="修改"
        :visible.sync="modifyFlag"
        width="50%"
        :before-close="handleClose">

      <el-form ref="form" :model="modifyData" label-width="70px">
        <el-form-item label="公告作者">
          <el-input v-model="modifyData.advauthor" placeholder="作者" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="发布时间" style="width: 100px">
          <div class="block">
            <el-date-picker
                v-model="modifyData.advtime"
                type="datetime"
                placeholder="选择日期时间"
                default-time="12:00:00">
            </el-date-picker>
          </div>
<!--          <el-input v-model="modifyData.advtime" placeholder="问题" auto-complete="off"></el-input>-->
        </el-form-item>

        <el-form-item label="公告内容">
          <template>
            <div class="local-quill-editor">
              <quill-editor
                  ref="myLQuillEditor"
                  v-model="modifyData.advctx"
                  :options="editorOption"
                  class="editor"
                  @blur="onEditorBlur"
                  @focus="onEditorFocus"
                  @change="onEditorChange"
              >
              </quill-editor>
            </div>
          </template>
        </el-form-item>
        <el-form-item label="公告置顶" style="width: 150px">
          <el-switch
              v-model="modifyData.advtop"
              active-color="#13ce66"
              inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
    <el-button @click="modifyFlag = false">取 消</el-button>
    <el-button type="primary" @click="modify()">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog
        title="添加"
        :visible.sync="insertFlag"
        width="50%"
        :before-close="handleClose">

      <el-form ref="form" :model="insertData" label-width="70px">
        <el-form-item label="公告作者">
          <el-input v-model="insertData.advauthor" placeholder="作者" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="发布时间" style="width: 200px">
          <div class="block">
            <el-date-picker
                v-model="insertData.advtime"
                type="datetime"
                placeholder="选择日期时间"
                default-time="12:00:00">
            </el-date-picker>
          </div>
<!--          <el-input v-model="insertData.advtime" placeholder="问题" auto-complete="off"></el-input>-->
        </el-form-item>

        <el-form-item label="公告内容">
          <template>
            <div class="local-quill-editor">
              <quill-editor
                  ref="myLQuillEditor"
                  v-model="insertData.advctx"
                  :options="editorOption"
                  class="editor"
                  @blur="onEditorBlur"
                  @focus="onEditorFocus"
                  @change="onEditorChange"
              >
              </quill-editor>
            </div>
          </template>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
    <el-button @click="insertFlag = false">取 消</el-button>
    <el-button type="primary" @click="inset()">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
// 引入样式和quillEditor
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {quillEditor} from 'vue-quill-editor'

export default {
  name: "advertisement",
  created() {
    this.flushPage()
  },
  data() {
    return {
      // 添加公告的对话框
      insertFlag:false,
      // 添加公告的表单
      insertData:{},
      // 模糊查询条件
      select:{},
      // 广告的List
      advsList: [],
      // 分页信息
      pageIndex: 1,
      pageSize: 5,
      total: 0,
      showFlag: false,
      modifyFlag: false,
      showData: {},
      modifyData: {},
      content: '',
      editorOption: {
        modules: {
          toolbar: toolbarOptions
        },
        theme: 'snow',
        placeholder: '请输入正文'
      },
    };
  },
  components: {
    quillEditor
  },
  methods: {
    // 分页的方法，当页面大小改变
    handleSizeChange(val) {
      this.pageSize = val
      this.flushPage()
    },
    // 当页面下标改变
    handleCurrentChange(val) {
      this.pageIndex = val
      this.flushPage()
    },
    flushPage() {
      this.$http.post("/Adv/List/" + this.pageIndex + "/" + this.pageSize,this.select).then(resp => {
        this.advsList = resp.data.data.records
        this.advsList.forEach(e=>{
          if(e.advtop==1){
            e.advtop=true
          }else {
            e.advtop=false
          }
        })
        this.total = resp.data.data.total
      })
    },
    // 失去焦点事件
    onEditorBlur(e) {
      console.log('onEditorBlur: ', e)
    },
    // 获得焦点事件
    onEditorFocus(e) {
      console.log('onEditorFocus: ', e)
    },
    // 内容改变事件
    onEditorChange(e) {
      console.log('onEditorChange: ', e)
    },
    popShow(data) {
      this.showData = data
      this.showFlag = true
    },
    popModify(data) {
      this.modifyData = JSON.parse(JSON.stringify(data))
      console.log(this.modifyData)
      this.modifyFlag = true
    },
    modify() {
      console.log(this.modifyData)
      if (this.modifyData.advtop==true){
        this.modifyData.advtop=1
      }else {this.modifyData.advtop=0}
      this.modifyFlag = false
      this.$http.post("/Adv/updateAdvById",this.modifyData).then(res=>{
        if (res.data.code===2000){
          this.flushPage()
          this.$notify({
            title: "操作成功",
            message: "广告修改成功",
            type: 'success'
          });
        }else {
          this.$notify({
            title: "操作失败",
            message:"系统繁忙请稍后再试",
            type: 'warning'
          });
        }
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    inset(){
      this.insertFlag=false
      this.$http.post("/Adv/Insert",this.insertData).then(res=>{

        if (res.data.code===2000){
          this.flushPage()
          this.$notify({
            title: "操作成功",
            message: "广告添加成功",
            type: 'success'
          });
        }else {
          this.$notify({
            title: "操作失败",
            message:"系统繁忙请稍后再试",
            type: 'warning'
          });
        }
      })
    },
    deleteById(row){
      this.$http.post("/Adv/deleteById/"+row.advid).then(res=>{
        if (res.data.code===2000){
          this.flushPage()
          this.$notify({
            title: "操作成功",
            message: "广告删除成功",
            type: 'success'
          });
        }else {
          this.$notify({
            title: "操作失败",
            message:"系统繁忙请稍后再试",
            type: 'warning'
          });
        }
      })
    }
  }
}
// 工具栏配置项
const toolbarOptions = [
  // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ['bold', 'italic', 'underline', 'strike'],
  // 引用  代码块-----['blockquote', 'code-block']
  ['blockquote', 'code-block'],
  // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{header: 1}, {header: 2}],
  // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{list: 'ordered'}, {list: 'bullet'}],
  // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{script: 'sub'}, {script: 'super'}],
  // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  [{indent: '-1'}, {indent: '+1'}],
  // 文本方向-----[{'direction': 'rtl'}]
  [{direction: 'rtl'}],
  // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  [{size: ['small', false, 'large', 'huge']}],
  // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{header: [1, 2, 3, 4, 5, 6, false]}],
  // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{color: []}, {background: []}],
  // 字体种类-----[{ font: [] }]
  [{font: []}],
  // 对齐方式-----[{ align: [] }]
  [{align: []}],
  // 清除文本格式-----['clean']
  ['clean'],
]
</script>

<style scoped>
.editor-btn {
  margin-top: 20px;
}
</style>
